
<script setup>
	
	/** props */
	defineProps({
		play: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: '#f40'
		}
	});
	
	
</script>

<template>
	<view :style="{ color }" class="flex items-center">
		<text class="word-string word-string-xiaowugui text-50" />
		<view class="wifi-symbol w-50 h-50 overflow-hidden" :class="{ active: play }" :style="{ opacity: play ? 1 : 0 }">
			<view class="wifi-circle absolute round-full second w-25 h-25" />
			<view class="wifi-circle absolute round-full third w-40 h-40" />
		</view>
	</view>
</template>


<style scoped lang="scss">
	.wifi-symbol {
	    box-sizing: border-box;
	    backface-visibility: hidden;
	    transform: rotate(135deg) translate3d(0, 0, 0) scale(.8);
	}
	
	.wifi-circle {
	    border: 5rpx solid;
	}
	
	.second {
	    top: 35rpx;
	    left: 35rpx;
	}
	
	.third {
	    top: 25rpx;
	    left: 25rpx;
	}
	
	.active {
		.second {
			animation: fadeInOut 1s infinite 0.2s;
			-webkit-animation: fadeInOut 1s infinite 0.2s;
		}
	
		.third {
			animation: fadeInOut 1s infinite 0.4s;
			-webkit-animation: fadeInOut 1s infinite 0.4s;
		}
	}
	
	@keyframes fadeInOut {
	    0%{opacity: 0}
	    100%{opacity: 1}
	}
</style>